<!--  -->
<template>
    <div>
        <template v-for="(item,index) in attendList">
            <div class="attend-item" :key="index">
                <div class="flex justify-between aligin-center">
                    <img class="avator" :src="item.avatar" alt="">
                    <span class="ml-8 mr-auto f-12">{{item.nick_name}}购买了</span>
                    <span class="color-gray f-10">{{item.updated_time}}</span>
                </div>
                <template v-for="(_item,index) in item.goods_thumb">
                <div class="attend-info flex" :key="index">
                    <img class="product-img" :src="_item.pic_cover_small" alt="">
                    <div class="flex flex-column justify-between ml-8 flex-1">
                        <div class="flex justify-between">
                            <span class="ellipsis w-200">{{_item.goods_name}}</span>
                            <span class="color-gray">¥{{_item.price}}</span>
                        </div>
                        <div class="flex justify-between color-red mb-8">
                            <span>获得活动号码:{{_item.give_power||item.number}}</span>
                            <span>x {{_item.num}}</span>
                        </div>
                    </div>
                     <div class="info-divide" >

                    </div>
                </div>
               
                </template>
            </div>
        </template> 
         
    </div>
</template>

<script>
export default {
  props: {
    attendList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.mb-8 {
  margin-bottom: 8px;
}
.w-200{
    width: 200px;

}
.attend-item {
  padding: 8px 14px 13px 16px;
  border-bottom: 1px solid#F8F8F8;
  font-size: 12px;
  .avator {
    width: 26px;
    height: 26px;
    border-radius: 50%;
  }
  .attend-info {
    margin-left: 30px;
    padding: 5px;
    background: rgba(248, 248, 248, 1);
    .product-img {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
    }
    .flex-1 {
      flex: 1;
    }
    .flex-column {
      flex-direction: column;
    }
    .color-red {
      color: #f8597f;
    }
    .info-divide{
        margin-top: 14px;
        width: 330px;
        height: 1px;
        background: #F8F8F8;
        &:last-child{
            display: none;
        }
    }
  }
}
</style>